<template>
  <div class="widget-view widget-table-view"
       @click="handleSelectWidget(index)"
       :class="{active: selectWidget.key == element.key,}">
    <!--表格-->
    <div class="tableBox" @dragover="dragInto" @dragleave="dragleave">
      <div class="subform-content">
        <div class="row-head">
          <div class="head-label"></div>
          <div class="row-num">1</div>
        </div>
        <div class="dragBox forbidden-childe-pointer-events">
          <draggable
            v-model="widgetList"
            class="dragTableBox"
            :no-transition-on-drag="true"
            v-bind="{group:'cmTemplate', ghostClass: 'ghost',animation: 100}"
            @add="handleWidgetAdd($event)">
            <div class="emptyBox" v-show="!isOver && widgetList.length<1">
              <div class="noneContent">请从左侧拖拽来添加字段</div>
            </div>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Draggable from 'vuedraggable'
  export default {
    name: 'WidgetTableItem',
    components: {
      Draggable
    },
    props: {
      element: {
        type: Object,
        default () {
          return {}
        }
      },
      'select': {},
      'index': {
        type: Number
      },
      'data': {},
      listKey: {
        type: String,
        default: 'list'
      }
    },
    data () {
      return {
        selectWidget: this.select,
        widgetList: [],
        isOver: false,
      }
    },
    computed: {
      ...mapGetters(['hasChoose'])
    },
    watch: {
      select (val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler (val) {
          this.$emit('update:select', val)
        },
        deep: true
      },
      element: {
        handler (val) {
          if (val.type && val.type !== 'table') {
            this.widgetList = [{...val}]
          }
        },
        immediate: true
      }
    },
    methods: {
      dragInto () {
        if (this.hasChoose) {
          this.isOver = true
        }
      },
      dragleave () {
        this.isOver = false
      },
      handleSelectWidget (index) {
        this.selectWidget = JSON.parse(JSON.stringify(this.data[this.listKey][index]))
      },
      handleWidgetAdd ($event) {
        if (!this.isOver) {
          this.widgetList = []
        }
      },
      // 删除组件
      delWidget () {
        this.widgetList = []
        this.isOver = false
      }
    }
  }
</script>

<style lang="scss">
  .widget-view {
    &.widget-table-view {
      min-height: 75px;
    }
    min-height: 100px;
    margin: 5px;
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: move;
    .title {
      text-align: center;
      height: 23px;
      line-height: 23px;
      border-bottom: 1px solid #ddd;
      width: 100%;
    }
    .tableBox {
      display: flex;
      flex: 1;
      align-items: center;
      position: relative;
      width: 100%;
      padding: 5px;
      .widget-btn-pane {
        position: absolute;
        right: 10px;
        top: 3px;
        height: 23px;
        width: 23px;
        box-shadow: 0 2px 4px 0 #ddd;
        background-color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:hover {
          color: #d84636;
          background-color: #FDECEC;
        }
      }
      .sortable-chosen {
        display: none;
      }
    }

    .forbidden-childe-pointer-events * {
      pointer-events: none;
    }

    .dragBox {
      position: relative;
      width: 100%;
      .dragTableBox {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
      }
    }

    .emptyBox {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .noneContent {
      color: #91A1B7
    }

    .el-form-item__label {
      background-color: rgba(0,0,0,0);
    }
    .el-form-item {
      margin-bottom: 0;
      width: 100%;
    }

    .widgetTableBox {
      padding: 0;
    }
  }
  .widget-view:hover {
    background-color: #F5F7FA;
  }
  .widget-view.active {
    background-color: #DEF1FF;
  }

  .subform-content {
    display: flex;
    width: 100%;
    .row-head {
      width: 68px;
      .head-label {
        background: #fff;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        width: 68px;
        height: 35px;
        border-top-left-radius: 3px;
      }
      .row-num {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fcfcfd;
        border-right: solid 1px #eee;
      }
    }
  }
</style>
